<template>
	<PageWrapper title="表单校验示例">
		<div class="mb-4">
			<a-button @click="validateForm" class="mr-2"> 手动校验表单 </a-button>
			<a-button @click="resetValidate" class="mr-2"> 清空校验信息 </a-button>
			<a-button @click="getFormValues" class="mr-2"> 获取表单值 </a-button>
			<a-button @click="setFormValues" class="mr-2"> 设置表单值 </a-button>
			<a-button @click="resetFields" class="mr-2"> 重置 </a-button>
		</div>
		<CollapseContainer title="表单校验">
			<BasicForm @register="register" @submit="handleSubmit" />
		</CollapseContainer>
	</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useForm } from '#/hooks';
import type { FormSchema } from '#/types';
import { CollapseContainer, PageWrapper, BasicForm } from '#/components';
import { useMessage } from '@/hooks/web/useMessage';

const schemas: FormSchema[] = [
	{
		field: 'field1',
		component: 'Input',
		label: '字段1',
		colProps: {
			span: 8,
		},
		required: true,
	},
	{
		field: 'field2',
		component: 'Input',
		label: '字段2',
		colProps: {
			span: 8,
		},
		required: true,
	},
	{
		field: 'id',
		label: 'id',
		required: true,
		defaultValue: 0,
		component: 'InputNumber',
		show: false,
	},
	{
		field: 'field3',
		component: 'DatePicker',
		label: '字段3',
		colProps: {
			span: 8,
		},
		required: true,
	},
	{
		field: 'field33',
		component: 'DatePicker',
		label: '字段33',
		colProps: {
			span: 8,
		},
		componentProps: {
			valueFormat: 'YYYY-MM-DD',
		},
		rules: [{ required: true, type: 'string' }],
	},
	{
		field: 'field44',
		component: 'InputCountDown',
		label: '验证码',
		colProps: {
			span: 8,
		},
		required: true,
	},
	{
		field: 'field4',
		component: 'Select',
		label: '字段4',
		colProps: {
			span: 8,
		},
		componentProps: {
			mode: 'multiple',
			options: [
				{
					label: '选项1',
					value: '1',
					key: '1',
				},
				{
					label: '选项2',
					value: '2',
					key: '2',
				},
			],
		},
		rules: [
			{
				required: true,
				message: '请输入aa',
				type: 'array',
			},
		],
	},
	{
		field: 'field441',
		component: 'Input',
		label: '自定义校验',
		colProps: {
			span: 8,
		},
		rules: [
			{
				required: true,
				// @ts-ignore
				validator: async (rule, value) => {
					if (!value) {
						/* eslint-disable-next-line */
						return Promise.reject('值不能为空');
					}
					if (value === '1') {
						/* eslint-disable-next-line */
						return Promise.reject('值不能为1');
					}
					return Promise.resolve();
				},
				trigger: 'change',
			},
		],
	},
	{
		field: 'field5',
		component: 'CheckboxGroup',
		label: '字段5',
		colProps: {
			span: 8,
		},
		componentProps: {
			options: [
				{
					label: '选项1',
					value: '1',
				},
				{
					label: '选项2',
					value: '2',
				},
			],
		},
		rules: [{ required: true }],
	},
	{
		field: 'field7',
		component: 'RadioGroup',
		label: '字段7',
		colProps: {
			span: 8,
		},
		componentProps: {
			options: [
				{
					label: '选项1',
					value: '1',
				},
				{
					label: '选项2',
					value: '2',
				},
			],
		},
		rules: [{ required: true, message: '覆盖默认生成的校验信息' }],
	},
	{
		field: 'field8',
		component: 'Input',
		label: '后端异步验证',
		colProps: {
			span: 8,
		},
		helpMessage: ['本字段演示异步验证', '本地规则：必须填写', '后端规则：不能包含admin'],
		rules: [
			{
				required: true,
				message: '请输入数据',
			},
			{
				validator(_, value) {
					return new Promise((resolve, reject) => {
						isAccountExist(value)
							.then(() => resolve())
							.catch(err => {
								reject(err.message || '验证失败');
							});
					});
				},
			},
		],
	},
];

function isAccountExist(value: string) {
	return new Promise((res, rej) => {
		if (!value || value.includes('admin')) {
			rej('账号错误');
		}
		res(true);
	});
}

export default defineComponent({
	components: { BasicForm, CollapseContainer, PageWrapper },
	setup() {
		const { createMessage } = useMessage();
		const [register, { validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue }] = useForm({
			labelWidth: 120,
			schemas,
			actionColOptions: {
				span: 24,
			},
		});
		async function validateForm() {
			try {
				const res = await validateFields();
				console.log('passing', res);
			} catch (error) {
				console.log('not passing', error);
			}
		}
		async function resetValidate() {
			clearValidate();
		}
		function getFormValues() {
			const values = getFieldsValue();
			createMessage.success('values:' + JSON.stringify(values));
		}
		function setFormValues() {
			setFieldsValue({
				field1: 1111,
				field5: ['1'],
				field7: '1',
				field33: '2020-12-12',
				field3: '2020-12-12',
			});
		}
		return {
			register,
			schemas,
			handleSubmit: (values: any) => {
				createMessage.success('提交成功，请在控制台查看');
				console.log(values);
			},
			getFormValues,
			setFormValues,
			validateForm,
			resetValidate,
			resetFields,
		};
	},
});
</script>
